import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";
import "./picker";

class UiExampleMobile extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            show(ref) {
                var self = this;       
                self.$refs[ref].show();    
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div style="display: flex">
        <aui-picker style="flex: 1" layout="inline" :data="picker1Data" :value="picker1Value"></aui-picker>
        <aui-picker style="flex: 1" layout="inline" :data="picker2Data" :value="picker2Value"></aui-picker>
        <aui-picker style="flex: 1" layout="inline" :data="picker3Data" :value="picker3Value"></aui-picker>
    </div>
</div>`;
    }
    _mounted() {
        var self = this;        
    }
    _data() {
        var ret = {};
        ret.picker1Data = [
            []                       
        ];
        for ( var i = 0; i < 24; i++ ) {
            ret.picker1Data[0].push({
                name: i+1,
                value: i+1
            });
        }
        ret.picker1Value = ret.picker1Data[0][0];
        ret.picker2Data = [
            []                       
        ];
        for ( var i = 0; i < 60; i++ ) {
            ret.picker2Data[0].push({
                name: i+1,
                value: i+1
            });
        }
        ret.picker2Value = ret.picker2Data[0][0];
        ret.picker3Data = [
            []                       
        ];
        for ( var i = 0; i < 60; i++ ) {
            ret.picker3Data[0].push({
                name: i+1,
                value: i+1
            });
        }
        ret.picker3Value = ret.picker3Data[0][0];
        return ret;
    }  
}

window.AUICustomComponents.define("ui-example-mobile", UiExampleMobile);

export default createSubpageComponent(
    `<ui-example-mobile></ui-example-mobile>`
);